<template>
  <view class="w-[750rpx] bg-[#f5f7fa] min-h-screen">
    <!-- Header -->
    <view class="bg-gradient-to-br from-[#4caf50] to-[#2e7d32] text-white p-[60rpx_40rpx_60rpx] text-center relative">
      <view class="text-[48rpx] font-bold flex items-center justify-center mb-[20rpx]">
        <IconFont name="heartbeat" class="mr-[20rpx] text-[56rpx]" />
        <text>健康中国</text>
      </view>
      <text class="text-[40rpx] mb-[40rpx] block">电子健康卡申请</text>
      
      <!-- 进度条 -->
      <view class="flex justify-between px-[120rpx_200rpx] relative mt-[40rpx]">
        <!-- 进度条背景 -->
        <view class="absolute bottom-[-36rpx] left-[200rpx] right-[200rpx] h-[8rpx] bg-[#e0e0e0] z-[1] rounded-[4rpx]">
          <view 
            class="h-full bg-[#4caf50] transition-all duration-500 rounded-[4rpx]"
            :style="{ width: progressWidth + '%' }"
          ></view>
        </view>
        
        <!-- 步骤1 -->
        <view class="flex flex-col items-center z-[2]">
          <view 
            class="w-[72rpx] h-[72rpx] rounded-full flex items-center justify-center font-bold mb-[16rpx] border-4 transition-all duration-300 bg-[#4caf50] text-white border-[#4caf50]"
          >
            <text class="text-[32rpx]">1</text>
          </view>
          <text class="text-[28rpx] text-center transition-all duration-300 text-white font-bold">身份验证</text>
        </view>
        
        <!-- 步骤2 -->
        <view class="flex flex-col items-center z-[2]">
          <view 
            class="w-[72rpx] h-[72rpx] rounded-full flex items-center justify-center font-bold mb-[16rpx] border-4 transition-all duration-300"
            :class="step2Active ? 'bg-[#4caf50] text-white border-[#4caf50]' : 'bg-[#e0e0e0] text-[#9e9e9e] border-[#e0e0e0]'"
          >
            <text class="text-[32rpx]">2</text>
          </view>
          <text 
            class="text-[28rpx] text-center transition-all duration-300"
            :class="step2Active ? 'text-white font-bold' : 'text-white opacity-60'"
          >签署协议</text>
        </view>
        
        <!-- 步骤3 -->
        <view class="flex flex-col items-center z-[2]">
          <view 
            class="w-[72rpx] h-[72rpx] rounded-full flex items-center justify-center font-bold mb-[16rpx] border-4 transition-all duration-300"
            :class="step3Active ? 'bg-[#4caf50] text-white border-[#4caf50]' : 'bg-[#e0e0e0] text-[#9e9e9e] border-[#e0e0e0]'"
          >
            <text class="text-[32rpx]">3</text>
          </view>
          <text 
            class="text-[28rpx] text-center transition-all duration-300"
            :class="step3Active ? 'text-white font-bold' : 'text-white opacity-60'"
          >完成注册</text>
        </view>
      </view>
    </view>
    
    <!-- Content -->
    <view class="p-[60rpx] min-h-[800rpx]">
      <!-- 健康码展示 -->
      <view v-if="currentStep === 'health-code'" class="animate-fade-in">
        <view class="bg-gradient-to-br from-[#4caf50] to-[#2e7d32] rounded-[32rpx] p-[60rpx] text-white text-center shadow-lg mb-[40rpx]">
          <view class="flex justify-between items-center mb-[60rpx]">
            <text class="text-[44rpx] font-bold">电子健康卡</text>
            <view class="bg-white bg-opacity-20 px-[30rpx] py-[10rpx] rounded-[40rpx] text-[28rpx]">
              有效期至: 2025-12-31
            </view>
          </view>
          
          <view class="w-[400rpx] h-[400rpx] bg-white mx-auto mb-[60rpx] rounded-[24rpx] flex items-center justify-center relative overflow-hidden">
            <view class="absolute inset-0 bg-gradient-to-br from-transparent via-[#4caf50] to-transparent opacity-20"></view>
            <IconFont name="qrcode" class="text-[200rpx] text-[#4caf50] z-[2]" />
          </view>
          
          <view class="bg-white bg-opacity-15 p-[30rpx] rounded-[24rpx] mt-[40rpx]">
            <view class="flex justify-between py-[16rpx] border-b border-white border-opacity-20">
              <text class="font-bold">姓名:</text>
              <text>张三</text>
            </view>
            <view class="flex justify-between py-[16rpx] border-b border-white border-opacity-20">
              <text class="font-bold">身份证号:</text>
              <text>310************012</text>
            </view>
            <view class="flex justify-between py-[16rpx]">
              <text class="font-bold">卡号:</text>
              <text>EHC202307210001</text>
            </view>
          </view>
        </view>
        
        <view class="bg-[#e8f5e9] border-l-4 border-[#4caf50] p-[30rpx] rounded-r-[16rpx] mb-[40rpx] text-[28rpx] text-[#2e7d32]">
          <IconFont name="info-circle" class="mr-[10rpx]" />
          <text>电子健康卡可在全国医疗机构使用，实现跨机构、跨区域就医一卡通。</text>
        </view>
        
        <nut-button 
          type="primary" 
          block 
          size="large"
          class="h-[88rpx] text-[36rpx] bg-gradient-to-r from-[#4caf50] to-[#2e7d32]"
          @click="showSignSection"
        >
          <IconFont name="sync-alt" class="mr-[10rpx]" />
          <text>重新申请</text>
        </nut-button>
      </view>
      
      <!-- 签署协议 -->
      <view v-if="currentStep === 'sign'" class="animate-fade-in">
        <view class="text-center">
          <view class="text-[160rpx] text-[#4caf50] mb-[60rpx]">
            <IconFont name="file-signature" />
          </view>
          <text class="text-[48rpx] mb-[30rpx] block text-[#4caf50] font-bold">签署电子协议</text>
          <text class="text-[32rpx] text-[#666] leading-[1.6] mb-[60rpx] block">
            根据国家卫生健康委员会要求，申请电子健康卡需要签署《电子健康卡使用协议》，请仔细阅读协议内容后签署。
          </text>
          
          <view class="bg-[#f8f9fa] rounded-[24rpx] p-[50rpx] text-center mb-[40rpx] border border-[#e9ecef]">
            <view class="text-[96rpx] mb-[40rpx]" :class="signStatusIconClass">
              <IconFont :name="signStatusIcon" />
            </view>
            <text class="text-[40rpx] mb-[30rpx] block font-bold">{{ signStatusText }}</text>
            <text class="text-[#6c757d] mb-[40rpx] block">{{ signStatusDesc }}</text>
          </view>
          
          <nut-button 
            type="primary" 
            size="large"
            class="h-[88rpx] text-[36rpx] bg-gradient-to-r from-[#4caf50] to-[#2e7d32]"
            @click="handleSignAction"
          >
            <IconFont :name="signActionIcon" class="mr-[10rpx]" />
            <text>{{ signActionText }}</text>
          </nut-button>
        </view>
      </view>
      
      <!-- 注册表单 -->
      <view v-if="currentStep === 'register'" class="animate-fade-in">
        <text class="text-[48rpx] mb-[30rpx] block text-[#4caf50] font-bold text-center">填写个人信息</text>
        <text class="text-[32rpx] text-[#666] leading-[1.6] mb-[60rpx] block text-center">请填写真实信息完成电子健康卡注册</text>
        
        <view class="mb-[50rpx]">
          <text class="block mb-[16rpx] font-bold text-[#555] text-[32rpx]">姓名</text>
          <input 
            v-model="formData.name"
            type="text" 
            class="w-full box-border px-[30rpx] py-[30rpx] border-2 border-[#ddd] rounded-[20rpx] text-[32rpx] bg-[#f8f9fa]"
            placeholder="请输入您的真实姓名"
          />
        </view>
        
        <view class="mb-[50rpx]">
          <text class="block mb-[16rpx] font-bold text-[#555] text-[32rpx]">身份证号码</text>
          <input 
            v-model="formData.idCard"
            type="text" 
            class="w-full box-border px-[30rpx] py-[30rpx] border-2 border-[#ddd] rounded-[20rpx] text-[32rpx] bg-[#f8f9fa]"
            placeholder="请输入您的身份证号码"
          />
        </view>
        
        <view class="mb-[50rpx]">
          <text class="block mb-[16rpx] font-bold text-[#555] text-[32rpx]">手机号码</text>
          <input 
            v-model="formData.phone"
            type="tel" 
            class="w-full box-border px-[30rpx] py-[30rpx] border-2 border-[#ddd] rounded-[20rpx] text-[32rpx] bg-[#f8f9fa]"
            placeholder="请输入您的手机号码"
          />
        </view>
        
        <view class="bg-[#e8f5e9] border-l-4 border-[#4caf50] p-[30rpx] rounded-r-[16rpx] mb-[40rpx] text-[28rpx] text-[#2e7d32]">
          <IconFont name="shield-alt" class="mr-[10rpx]" />
          <text>我们承诺保护您的个人信息安全，所有信息仅用于电子健康卡注册</text>
        </view>
        
        <nut-button 
          type="primary" 
          block 
          size="large"
          class="h-[88rpx] text-[36rpx] bg-gradient-to-r from-[#4caf50] to-[#2e7d32]"
          @click="registerHealthCard"
        >
          <IconFont name="check-circle" class="mr-[10rpx]" />
          <text>提交注册</text>
        </nut-button>
      </view>
      
      <!-- 注册成功 -->
      <view v-if="currentStep === 'success'" class="animate-fade-in">
        <view class="text-center p-[60rpx]">
          <view class="text-[160rpx] text-[#4caf50] mb-[40rpx]">
            <IconFont name="check-circle" />
          </view>
          <text class="text-[48rpx] mb-[30rpx] block text-[#4caf50] font-bold">注册成功！</text>
          <text class="text-[32rpx] text-[#666] leading-[1.6] mb-[60rpx] block">
            您已成功注册电子健康卡，现在可以凭此卡在全国医疗机构使用，享受便捷的医疗服务。
          </text>
          
          <nut-button 
            type="primary" 
            size="large"
            class="h-[88rpx] text-[36rpx] bg-gradient-to-r from-[#4caf50] to-[#2e7d32]"
            @click="showHealthCode"
          >
            <IconFont name="qrcode" class="mr-[10rpx]" />
            <text>查看我的健康码</text>
          </nut-button>
        </view>
      </view>
    </view>
    
    <!-- Footer -->
    <view class="text-center p-[50rpx] text-[#666] text-[28rpx] border-t border-[#eee]">
      <text class="block">© 2023 国家卫生健康委员会 | 电子健康卡服务平台</text>
      <text class="block mt-[20rpx]">服务热线: 12320</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import Taro from '@tarojs/taro'

// 用户状态
const userState = reactive({
  hasVuid: false,
  contractSent: false,
  contractSigned: false,
  registered: false
})

// 表单数据
const formData = reactive({
  name: '',
  idCard: '',
  phone: ''
})

// 当前步骤
const currentStep = ref('sign')

// 计算进度条宽度
const progressWidth = computed(() => {
  if (userState.registered) return 100
  if (userState.contractSigned) return 66
  if (userState.contractSent) return 33
  return 0
})

// 步骤激活状态 - 使用布尔值替代动态类名
const step2Active = computed(() => {
  return userState.contractSent || userState.contractSigned || userState.registered
})

const step3Active = computed(() => {
  return userState.registered
})

// 签署状态相关
const signStatusIcon = computed(() => {
  if (userState.contractSent) return 'hourglass-half'
  return 'file-medical'
})

const signStatusIconClass = computed(() => {
  if (userState.contractSent) return 'text-[#ff9800]'
  return ''
})

const signStatusText = computed(() => {
  if (userState.contractSent) return '待签署'
  return '未签署协议'
})

const signStatusDesc = computed(() => {
  if (userState.contractSent) return '我们已将电子协议发送到您的手机，请及时签署'
  return '您需要签署电子健康卡使用协议后才能申请电子健康卡'
})

const signActionIcon = computed(() => {
  if (userState.contractSent) return 'check'
  return 'pen'
})

const signActionText = computed(() => {
  if (userState.contractSent) return '我已签署'
  return '去签署'
})

// 初始化页面
onMounted(() => {
  // 从本地存储读取状态
  const hasVuid = Taro.getStorageSync('hasVuid')
  const contractSent = Taro.getStorageSync('contractSent')
  const contractSigned = Taro.getStorageSync('contractSigned')
  const registered = Taro.getStorageSync('registered')
  
  userState.hasVuid = hasVuid
  userState.contractSent = contractSent
  userState.contractSigned = contractSigned
  userState.registered = registered
  
  // 根据状态显示对应页面
  if (userState.hasVuid && userState.registered) {
    showHealthCode()
  } else if (userState.contractSigned) {
    showRegisterSection()
  } else if (userState.contractSent) {
    showSignSection()
  } else {
    showSignSection()
  }
})

// 显示健康码
const showHealthCode = () => {
  currentStep.value = 'health-code'
}

// 显示签署协议
const showSignSection = () => {
  currentStep.value = 'sign'
}

// 显示注册表单
const showRegisterSection = () => {
  currentStep.value = 'register'
}

// 显示成功页面
const showSuccess = () => {
  currentStep.value = 'success'
}

// 处理签署操作
const handleSignAction = () => {
  if (userState.contractSent) {
    // 完成签署
    userState.contractSigned = true
    Taro.setStorageSync('contractSigned', true)
    showRegisterSection()
    
    Taro.showToast({
      title: '电子合同签署成功！',
      icon: 'success',
      duration: 2000
    })
  } else {
    // 发送合同
    userState.contractSent = true
    Taro.setStorageSync('contractSent', true)
    showSignSection()
    
    Taro.showToast({
      title: '电子合同已发送到您的手机，请及时签署！',
      icon: 'success',
      duration: 2000
    })
  }
}

// 注册健康卡
const registerHealthCard = () => {
  if (!formData.name || !formData.idCard || !formData.phone) {
    Taro.showToast({
      title: '请填写完整的个人信息！',
      icon: 'none',
      duration: 2000
    })
    return
  }
  
  if (!/^\d{17}[\dXx]$/.test(formData.idCard)) {
    Taro.showToast({
      title: '请输入有效的身份证号码！',
      icon: 'none',
      duration: 2000
    })
    return
  }
  
  if (!/^1[3-9]\d{9}$/.test(formData.phone)) {
    Taro.showToast({
      title: '请输入有效的手机号码！',
      icon: 'none',
      duration: 2000
    })
    return
  }
  
  // 保存注册状态
  userState.hasVuid = true
  userState.registered = true
  Taro.setStorageSync('hasVuid', true)
  Taro.setStorageSync('registered', true)
  
  showSuccess()
}
</script>

<style>
.animate-fade-in {
  animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
  from { 
    opacity: 0; 
    transform: translateY(40rpx); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}
</style>
